<script setup lang="ts">
import {useRoleViewStore} from "@/store/views/sys/admin/roleStore";
import {storeToRefs} from "pinia";
import {openConfirm} from "@/components/MyComponent/XMessageBox";
import {deleteRoleApi} from "@/api/sys/admin/role";
import {RoleVo} from "@/api/sys/admin/role/types";

const store = useRoleViewStore()
const { formatStatus, openEdit, openAdd, getList, sortTable} = store

const {tableData} = storeToRefs(store)
// 删除
async function openDelete(id: number) {
  if (await openConfirm('确定删除角色')) {
    await deleteRoleApi(id)
    ElMessage.success('删除成功')
    await getList()
  }
}
</script>

<template>
  <!-- 表格 -->
  <x-card>
    <!--    新增按钮-->
    <el-button type="success" @click="openAdd()">
      <i-ep-plus/>
      <span>新增</span>
    </el-button>
    <el-divider/>
    <el-table :data="tableData" @sort-change="sortTable" style="width: 100%">
      <el-table-column fixed prop="id" label="id" width="80" sortable="custom"/>
      <el-table-column prop="name" label="角色名" width="150"/>
      <el-table-column prop="code" label="编码" width="150"/>
      <el-table-column prop="sort" label="排序"  width="60"/>
      <el-table-column prop="status" label="状态" :formatter="formatStatus" width="100"/>
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="{row}">
          <el-button link type="primary" size="small" @click="openEdit(row.id)">
            <i-ep-edit/>
            <span>编辑</span>
          </el-button>
          <el-button link type="danger" size="small" @click="openDelete(row.id)">
            <i-ep-delete/>
            <span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </x-card>
</template>